// -------- members.js -------
function validateAndUpdateUI() {
  const value = this.$element.value;

  this.error = this.validations.find((validation) => {
    return !validation.test(value);
  })?.message;

  this.error
    ? this.$element.classList.add("error")
    : this.$element.classList.remove("error");

  this.$errorElement.innerHTML = this.error || "";
}

export const email = {
  $element: document.getElementById("email"),
  $errorElement: document.getElementById("email-error"),
  validations: [
    {
      test: (value) => !!email,
      message: "비어있습니다",
    },
    {
      test: (value) =>
        /^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/.test(email),
      message: "잘못된 이메일입니다",
    },
  ],
  error: null,
  isDirty: false,
  validateAndUpdateUI,
};

export const password = {
  $element: document.getElementById("password"),
  $errorElement: document.getElementById("password-error"),
  validations: [
   {
      test: (value) => value.length === 0,
      message: "비었음",
    },
    {
      test: (value) => value.length >= 8,
      message: "8글자 이상 ",
    },
  ],
  error: null,
  isDirty: false,
  validateAndUpdateUI,
};

//... 중략

export const updateSubmitButtonState = (formElements) => {
  const submitButton = document.querySelector("#submit");
  const formValid = Object.values(formElements).every(
    (element) => !element.error && element.isDirty
  );

  submitButton.disabled = !formValid;
};

export const handleInputForm = (formElements) => (e) => {
  const { id } = e.target;

  const targetElement = formElements[id];
  targetElement.isDirty = true;
  targetElement.validateAndUpdateUI();

  updateSubmitButtonState(formElements);
};

// --------login.js------
import { email, password, updateSubmitButtonState, handleInputForm } from './common/members.js'

const formElements = {
  email,
  password,
};

const handleInputEvent = handleInputForm(formElements);

const $form = document.querySelector("form");
$form.addEventListener("input", handleInputEvent);
```;